import React from 'react';
import Student from './Student';
import './StudentList.css';
import { reqStudentsData,reqAddStudent } from '../../api/student';
import { NavLink, Outlet, useLoaderData, Form } from 'react-router-dom';

// import StudentForm from './StudentForm';
export async function loader() {
  //发请求获取学生数据
  const studentList = await reqStudentsData()
  // console.log(studentList);
  return studentList
}
export async function action(){
  //发请求添加学生
 await reqAddStudent({name:'noName'})
 return null
}
const StudentList = () => {
  const { data: studentList, meta } = useLoaderData()
  console.log('stu', studentList);
 

  return (
    <div>
      <h2>学生列表</h2>

      <Form method='post'>
        <button type="submit">添加学生</button>
      </Form>
      <nav>
        {studentList.length ? (
          <ul>
            {studentList.map((stu) => {
              return (
                <li key={stu.id}>
                  <NavLink to={`students/${stu.id}`}>{stu.attributes.name}</NavLink>
                </li>
              )

            })}
          </ul>
        ) : (
          <p>
            <i>没有学生数据</i>
          </p>
        )}

      </nav>
      <div>
        <Outlet />
      </div>
    </div>
  );
};

export default StudentList;
